<template>
  <div class="app-container">
    <!-- 50是每一栏之间的间隔 -->
    <el-row :gutter="50">

      <el-col :span="13">
       <el-card :body-style="{ padding: '0px' }" shadow="always">

          <!-- 表格+分页条 -->
          <div style="padding: 10px;">
            <div style="padding: 10px;">
              训练数据集生成记录
            </div>
            <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
              <el-table-column prop="version" label="" align="center" />

              <el-table-column prop="time" label="生成时间" align="center" />
              <el-table-column prop="num" label="生成数量" align="center" />
              <el-table-column prop="name" label="名称" align="center" />
              <el-table-column prop="rate" label="正常域名/恶意域名" align="center" />




              <!-- <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="update(scope.row.id, scope.row.choosePeople)">配置</el-button>
                </template>
              </el-table-column> -->
            </el-table>

            <br>

            <!--分页工具条-->
            <el-pagination
              :background="background"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>

       </el-card>
     </el-col>

     <el-col :span="11" >
       <el-card :body-style="{ padding: '10px' }" shadow="always">
         <div style="padding: 10px;">
           导出数据集
         </div>

          <el-form ref="form" :model="form" label-width="180px">
            <el-form-item label="当前系统捕获的总域名数">
              {{ totalNum }}
            </el-form-item>
            <el-form-item label="导出的总域名数">
              {{ outDGA+outNOR }}
            </el-form-item>
            <el-form-item label="导出的恶意域名数">
              <div class="block" style="padding-right: 20px;padding-left: 10px;">
                <el-slider v-model="outDGA" :max="DGAmax"></el-slider>
              </div>
            </el-form-item>
            <el-form-item label="导出的正常域名数">
              <div class="block" style="padding-right: 20px;padding-left: 10px;">
                <el-slider v-model="outNOR" :max="NORmax"></el-slider>
              </div>
            </el-form-item>
            <el-form-item label="导出格式">
              <el-radio-group v-model="form.resource">
                <el-radio label="csv"></el-radio>
                <el-radio label="excel"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>

              <download-excel
                  class="export-excel-wrapper"
                  :data="DetailsForm"
                  :fields="json_fields"
                  :header="title"
                  name="6-13导出数据集.xlsx"
                >
                <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                <el-button type="success">导出</el-button>
                </download-excel>

              <!-- <el-button type="primary" @click="onSubmit">导出</el-button> -->
            </el-form-item>
          </el-form>

       </el-card>
     </el-col>
    </el-row>
    <el-row :gutter="50" style="padding-top: 20px;">
      <el-col :span="11">
        <el-card :body-style="{ padding: '20px' }" shadow="always">
          <div style="padding: 10px;">
            当前数据集构成
          </div>
          <div ref="chart" style="width: 600px;height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!--添加数据对话框表单-->
    <el-dialog ref="activityForm"
      title="添加活动"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <el-form ref="activityForm" :model="activityForm" :rules="rules" label-width="100px" size="mini">

        <el-form-item label="活动名称" prop="name">
          <el-input v-model="activityForm.name" />
        </el-form-item>

        <el-form-item label="活动内容" prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            maxlength="500"
            show-word-limit
            v-model="activityForm.content">
          </el-input>
        </el-form-item>

        <el-form-item label="活动地点" prop="place">
          <el-input v-model="activityForm.place" />
        </el-form-item>
        <el-form-item label="活动举办方" prop="org">
          <el-input v-model="activityForm.org" />
        </el-form-item>

        <el-form-item label="活动人数" prop="people">
          <el-input v-model.number="activityForm.people" />
        </el-form-item>

        <el-form-item label="活动时间" prop="beginTime" size="medium">
          <!-- <el-date-picker type="date" placeholder="选择日期" v-model="activityForm.beginTime" style=""></el-date-picker> -->
          <el-date-picker
            v-model="activityForm.beginTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>

        </el-form-item>

        <el-form-item label="活动积分" prop="score">
          <el-input v-model.number="activityForm.score" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('activityForm')">提交</el-button>
        <!-- <el-button @click="dialogVisible = false">取消修改</el-button> -->
        <el-button @click="resetForm('activityForm')">取消</el-button>
      </div>
    </el-dialog>

    <br>
</div>
</template>

<script>
// import { page, add, update, deleteById, selectById } from '@/api/emp.js'
import { orderPage, updateById, selectOrderById } from '@/api/order.js'
import { findAll } from '@/api/dept.js'
import { getToken } from '@/utils/auth'
import { page, insert, selectById, update, choose, myChoose, unChoose } from '@/api/activity.js'

import BarChart from '@/views/dashboard/components/BarChart'
import echarts from 'echarts';

export default {
  components: {
    BarChart
  },
  data() {
    return {

      title: "xx公司表格",
       json_fields: {
              "排查日期":'date',
              "整改隐患内容":'details',
              "整改措施":'measure',
              "整改时限":'timeLimit',
              "应急措施和预案":'plan',
              "整改责任人":'personInCharge',
              "填表人":'preparer',
              "整改资金":'fund',
              "整改完成情况":'complete',
              "备注":'remark',
            },
          DetailsForm: [
              {
                date: "2022-3-10",
                details: "卸油区过路灯损坏",
                measure: "更换灯泡",
                timeLimit: "2022-3-21",
                plan: "先使用充电灯代替,贴好安全提醒告示",
                personInCharge: "王xx",
                preparer: "王xx",
                fund: "20元",
                complete: "已完成整改",
                remark: "重新更换了灯泡",
              },

            ],



      kaiguan: true,

      form: {

      },
      totalNum: 81212,
      outNum: 0,
      outDGA: 10000,
      outNOR: 50000,

      DGAmax: 10000,
      NORmax: 70000,

      background: true,
      // 每页显示的条数
      pageSize: 10,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      // 添加数据对话框是否展示的标记
      dialogVisible: false,
      dialogVisible2: false,

      /** 搜索的模型数据 */
      searchEmp: {
        name: '',
        place: '',
        org: ''
      },

      /** 表单的数据模型对象 */
      activityForm: {
        beginTime: "",
        content: "",
        image: "",
        name: "",
        org: "",
        people: null,
        place: "",
        score: null,
        status: 1
      },

      activity: {
        beginTime: "",
        content: "",
        createTime: "",
        id: 0,
        image: "",
        name: "",
        org: "",
        people: 0,
        choosePeople: 0, //
        place: "",
        score: 0,
        status: 1,
        updateTime: "",
        choosePeople: 0
      },

      deptList: [],

      beginTime: '',
      endTime: '',
      entrydate: '',

      // 被选中的id数组
      selectedIds: [],
      // 复选框选中数据集合
      multipleSelection: [],
      // 表格数据
      tableData: [
        {
          version: '1',
          time: '2024-3-21',
          num: 60000,
          name: '3-21导出数据集',
          rate: '7:3'
        },
        {
          version: '2',
          time: '2024-3-23',
          num: 60300,
          name: '3-23导出数据集',
          rate: '7:3'
        },
        {
          version: '3',
          time: '2024-3-29',
          num: 63000,
          name: '3-29导出数据集',
          rate: '8:2'
        },
        {
          version: '4',
          time: '2024-4-1',
          num: 70000,
          name: '4-1导出数据集',
          rate: '9:1'
        },
        {
          version: '5',
          time: '2024-4-5',
          num: 80000,
          name: '4-5导出数据集',
          rate: '7:3'
        },
      ],
      token: { token: getToken() },

      /* 控制流程图 */
      // active: 1,

      selectedId: 0,

      // status: 20

    }
  },

  created () {
  },

  watch: {
    entrydate(val) {
      if (val && val.length >= 2) {
        this.beginTime = val[0]
        this.endTime = val[1]
      } else {
        this.beginTime = ''
        this.endTime = ''
      }
    }
  },

  mounted() { // 钩子方法
    this.page() // 当页面加载完成后，发送异步请求，获取数据

    this.NORmax = this.totalNum - this.DGAmax
    this.outDGA = this.DGAmax
    this.outNOR = this.NORmax

    this.getDateData()
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.activityForm.beginTime)

          // 请求后端接口
          insert(this.activityForm).then((result) => {
            if (result.data.status == 200) {
              //修改成功
              this.$message.success("保存成功");
              // 刷新页面
              this.page()
            } else {
              this.$message.error(result.data.msg);
            }
          })

          // 关闭对话框
          this.dialogVisible = false

          // 清空数据模型
          this.activityForm = {
            beginTime: "",
            content: "",
            image: "",
            name: "",
            org: "",
            people: null,
            place: "",
            score: null,
            status: 1
          }
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false
    },
    submitForm2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.activityForm.beginTime)

          if (this.kaiguan === true) {
            this.activity.status = 1
          } else {
            this.activity.status = 0
          }

          // 请求后端接口
          update(this.activity).then((result) => {
            if (result.data.status == 200) {
              //修改成功
              this.$message.success("修改成功");
              // 刷新页面
              this.page()
            } else {
              this.$message.error(result.data.msg);
            }
          })

          // 关闭对话框
          this.dialogVisible2 = false

          // 清空数据模型
          this.activity = {
            beginTime: "",
            content: "",
            createTime: "",
            id: 0,
            image: "",
            name: "",
            org: "",
            people: 0,
            choosePeople: 0,
            place: "",
            score: 0,
            status: 1,
            updateTime: "",
            choosePeople: 0
          }
          this.kaiguan = true
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm2(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible2 = false
    },
    handleClose(done) {
      // 确认的弹框
      this.$confirm('数据将不会保存，确认关闭？')
          .then(_ => {
            this.$refs['activityForm'].resetFields();
            done();
          })
          .catch(_ => {});
    },
    handleClose2(done) {
      // 确认的弹框
      this.$confirm('数据将不会保存，确认关闭？')
          .then(_ => {
            this.$refs['activity'].resetFields();
            done();
          })
          .catch(_ => {});
    },
    page() {
      // console.log("调用Page。。。")
      myChoose( // 向后端发请求
        this.currentPage,
        this.pageSize
      ).then((res) => {
        // 响应数据的data里面有total和rows，去看接口文档
        this.totalCount = res.data.data.total
        this.tableData = res.data.data.records
      })
    },
     onSubmit() {
       this.currentPage = 1
       this.page()
     },
    // 清空
     clear() {
       this.searchEmp = {
        name: '',
        place: '',
        org: ''
      },
       this.beginTime = ''
       this.endTime = ''
       this.entrydate = ''
       this.page()
     },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    addState () {
      if (this.active !== 4) this.active += 1
    },
    update(id, choosePeople) {
      this.dialogVisible2 = true
    },
    handleSizeChange(val) {
      // 重新设置每页显示的条数
      this.pageSize = val
      this.page()
    },

    handleCurrentChange(val) {
      // 重新设置当前页码
      this.currentPage = val
      this.page()
    },


    /**/
    getDateData() {
      let chartDom = echarts.init(this.$refs.chart);
      let option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
              orient: 'vertical',
              left: 10,
              data: ['恶意域名', '正常域名']
          },
          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: [
                      {value: this.DGAmax, name: '恶意域名'},
                      {value: this.NORmax, name: '正常域名'},
                  ]
              }
          ]
      };
      chartDom && chartDom.setOption(option);
      chartDom.resize();
      let sizeFun = () => {
        chartDom.resize();
      };
      window.addEventListener("resize", sizeFun);
      this.$once("hook:beforeDestroy", function () {
        echarts.dispose(chartDom);
      });

    }
  }
}
</script>
<style>
.wapper {
  padding: 40px;
}
.wapperBtn {
  padding: 20px;

}
.center-btns {
  display: flex;
  padding-left: 30%;
}

.chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;

    .button-text {
      line-height: 18px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.45);
      font-size: 16px;
      margin-bottom: 12px;
    }
  }
</style>
